<template>
  <div class="studentadd">
    <div class="box">
        <ul>
        <li><span>学生姓名</span><el-input v-model="name" placeholder="请输入关键字" style="width:200px;margin:0 12px"></el-input></li>
        <li>
          <span>性别</span>
          <el-select v-model="sex" placeholder="请选择性别" style="width:200px;margin:0 12px">
            <el-option label="女" value="女" ></el-option>
            <el-option label="男" value="男" ></el-option>
          </el-select>
        </li>

        <li>
          <span>年龄</span>
           <el-select v-model="age" placeholder="请选择年龄" style="width:200px;margin:0 12px">
            <el-option :label="item" :value="item" v-for="(item,index) in ageArr" :key="index"></el-option>
          </el-select>
        </li>

        <li>
          <span>学历</span>
          <el-select v-model="education" placeholder="请选择学历" style="width:200px;margin:0 12px">
            <el-option :label="item" :value="item" v-for="(item,index) in educationArr" :key="index"></el-option>
          </el-select>
        </li>

        <li>
          <span>所属学院</span>
          <el-select v-model="school" placeholder="请选择所属学院" style="width:200px;margin:0 12px">
            <el-option
              v-for="item in collegeArr"
              :key="item.key"
              :label="item.school"
              :value="item.school">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>所属班级</span>
          <el-select v-model="classr" placeholder="请选择" style="width:200px;margin:0 12px"
           @change="change"
          >
            <el-option
              v-for="item in classArr"
              :key="item.classid"
              :label="item.classname"
              :value="item.classid">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>当前课程</span>
          <el-select v-model="state" placeholder="请选择" style="width:200px;margin:0 12px"
         
          >
            <el-option
              v-for="item in courseArr"
              :key="item.key"
              :label="item.lesson"
              :value="item.key">
            </el-option>
          </el-select>
        </li>
      </ul>
        <div class="right">
          <span>座位</span>
           <div  style="margin:5px 0">
             <el-popconfirm
                v-for="(item,index) in data" :key="index"
                :title="item.seate==='可选'?'请选择座位':'不可选择座位'"
                :confirmButtonText="item.seate==='可选'?'确定':'误点'"
                confirmButtonType
                icon="el-icon-info"
                :iconColor="item.seate==='可选'?'green':'red'"
                @onConfirm="ok(item)"
              >
                <span :class="[item.seate==='可选'?'green':'red'].join(' ')" slot="reference">{{item.seate}}</span>
              </el-popconfirm>
           </div>
        </div>
    </div>
      <p><el-button type="primary" @click="studentAdd()">保存</el-button></p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      data:[],
      SetSeats:"",//座位
      name:'',
      sex:"",
      age:'',
      options:"",
      state:"",//课程
      classr:"",//班级
      school:"",//学校
      education:"",
      educationArr:["小学","初中","高中","大学","本科","中专","大专","其他"],
      ageArr:Array.from(new Array(36).keys()).splice(15,),
      collegeArr:[],//学院数据
      classArr:[],//班级数据
      courseArr:[],//课程数据
      setsr:[]
    }
  },
  mounted(){
    this.initData()  
  },
  methods:{
      change(){
        let classid,
            arr=[],
            i
        this.classArr.forEach(item=>{
              if(item.classid===this.classr){
                i=item.classnum*1
                classid=item.classid
              }
          })
           
         this.$httpAxios(this.$api.SETSREAtS({classid}),res=>{//改造座位列表
           for (let s=0;s<i;s++){
             arr.push({
               key:s,
               seate:res.data.filter(item=>item.seat*1===s)[0]?res.data.filter(item=>item.seat*1===s)[0].name:'可选',
             })
           }
           this.data= arr
           this.setsr=res.data
         })  
  },
    ok(item){//确定座位号
    if(item.seate!=='可选') return this.$message('此处已有人');
    for(let i=0;i<this.data.length;i++){
      if(this.name){

        if(this.data[i].seate==='预选座位'){
          this.data[i].seate='可选'
        }
        if(this.data[i].key===item.key){
          this.data[i].seate='预选座位'  
        }
      }
      else{
        // this.$message('先填写姓名才可以选择座位')
      }
    } 
    this.SetSeats=item.key
  },
    // 添加学生
    studentAdd(){
      
      let {sex,age,state,school,education,name,classr,SetSeats}=this
      if(!name) return this.$message('请填写姓名');
      if(!sex) return this.$message('请选择性别');
      if(!age) return this.$message('请选择年龄');
      if(!education) return this.$message('请选择学历');
      if(!school) return this.$message('请选择所在院校');
      if(!classr) return this.$message('请选择班级');
      if(!state) return this.$message('请选择当前课程');
      if(!SetSeats)  return this.$message('请选择座位');
      this.$httpAxios(this.$api.STUDENT_ADD({obj:{
        name,
        age,
        sex,
        schoolid:school,
        classid:classr,
        education:education,
        courseid:state,
        SetSeats
      }}))
      this.name=""
      this.age=""
      this.sex=""
      this.school=""
      this.classr=""
      this.education=""
      this.SetSeats=""
      this.state="",
      this.data=[]
    },
    initData(){
      this.$httpAxios(this.$api.STUDENT_LIST(),res=>{
        let {schoolList,lessonList,student,classr} = res.data
        this.classArr = student
        this.collegeArr = schoolList
        this.courseArr = lessonList
      })},
    // 一维数组转二维数据
  },
}
</script>

<style scoped>
  .studentadd ul>li{
    margin: 10px 0;
    list-style: none;
  }
  .studentadd ul>li>span{
    display: inline-block;
    width: 120px;
  }
  .green{
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0px 3px 3px 2px #9e9e9e;
    margin: 5px;
    background:  rgb(64, 158, 255);
    color: #fff;
  }
  .red{
    display: inline-block;
    text-align: center;
    line-height: 30px;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0px 3px 3px 2px #9e9e9e;
    margin: 5px;
  }
  .box{
    display: flow-root;
    min-width: 1100px;
  }
  .box>ul{
    float: left;
    width: 400px;
  }
  .box>.right{
    width: 700px;
    padding-top: 25px;
    float: left;
  }
</style>
